<template>
	<label class="c-radio" :style="containerStyle">
		<radio
			:value="value"
			class="c-radio__value"
			:color="color"
			:disabled="disabled"
			:background-color="backgroundColor"
			:active-background-color="activeBackgroundColor"
			:icon-color="iconColor"
			:border-color="borderColor"
			:active-border-color="activeBorderColor"
			:style="iconStyle"
			:checked="isChecked"
		/>
		<slot>
			<text class="c-radio__label">{{ label }}</text>
		</slot>
	</label>
</template>

<script setup>
	/**
	 * 单选组件
	 * @description c-radio 通用单选组件配合c-radio-group组件一起使用
	 * @example <c-radio-group><c-radio></c-radio></c-radio-group>
	 */
	import { computed, getCurrentInstance, inject } from 'vue';
	import _props from './props.js';

	const props = defineProps(_props);
	const parentInstance = inject('instatnce');
	

	const isChecked = computed(
		() =>
			(parentInstance && props.value == parentInstance.modelValue) ||
			(parentInstance && props.value == parentInstance.value)
	);
	
	const iconStyle = computed(() => {
		let size;
		switch (props.size) {
			case 'mini':
				size = 0.6;
				break;
			case 'small':
				size = 0.7;
				break;
			case 'normal':
				size = 0.8;
				break;
			case 'medium':
				size = 1;
				break;
			default:
			case 'normal':
				size = 0.8;
				break;
		}
		return {
			transform: props.size ? `scale(${size})` : null,
			marginLeft: props.reverse ? '8rpx' : null
		};
	});

	const containerStyle = computed(() => {
		const { vertical, reverse } = props;
		return {
			display: vertical ? 'flex' : 'inline-flex',
			padding: vertical ? '12rpx 24rpx' : null,
			flexDirection: reverse ? 'row-reverse' : null,
			justifyContent: reverse ? 'space-between' : null,
			margin: vertical ? 0 : '0 12rpx'
		};
	});

	function checkParent() {
		const instance = getCurrentInstance().proxy;
		const parentName = instance.$parent.$options.name;
		if (parentName != 'RadioGroup') {
			console.warn('请配合c-radio-group组件一起使用');
		}
	}
	checkParent();
</script>

<style lang="scss">
	.c-radio {
		display: inline-flex;
		// flex-direction: row-reverse;
		align-items: center;
		margin: 0 $margin-12;
		.c-radio__label {
			font-size: $font-28;
			color: $main-color;
		}
	}
</style>
